import React from 'react';

type InputProps = {
    error?: string | boolean;
    inputRef: React.Ref<HTMLInputElement>,
} & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

const BaseInput = ({
    error,
    inputRef,
    ...inputProps
}: InputProps) => {
    return (
        <div>
            <input ref={inputRef} {...inputProps}/>
            <br />
            {error && (<span>{error}</span>)}
        </div>
    )
}

BaseInput.defaultProps = {
    error: null,
}

export const Input = React.forwardRef((props: Omit<InputProps, 'inputRef'>, ref: React.Ref<HTMLInputElement>) => (
    <BaseInput {...props} inputRef={ref} />
));
